<template>
  <div class="progress">
    <div class="box">
      {{ currentTime | formateTime(2)  }}
      <div
        ref="progress-box"
        class="progress-box"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
      >
        <!-- 进度条 -->
        <div class="progress-content"  ref='progress-content'></div>
        <!-- dot -->
        <div class='dot' ref="dot"></div>
      </div>
      {{ duration | formateTime(2) }}
    </div>
  </div>
</template>
<script>
export default {
  props: ["duration", "currentTime"],
  computed: {
    // precent() {
    //   return this.currentTime / this.duration;
    // },
  },
  methods: {
    touchStart(e) {
      this.touch = true
      this.startX = e.touches[0].pageX;
    },
    touchMove(e) {
      // 手指移动的距离
      this.distance = e.touches[0].pageX - this.boxLeft;
    
      // console.log("手指移动", this.distance);
      this.move(this.distance)
    },
    touchEnd() {
       this.touch = false
      // console.log("手指抬起", this.distance);
      const changeTime = (this.distance / this.boxWidth) * this.duration;
      this.$emit("changeTime", changeTime);
    },
    move(distance) {
      // 边界的判断
      if(distance<0 || distance > this.boxWidth) return
      const precent = distance/ this.boxWidth * 100
      // 小圆球移动
      this.$refs.dot.style.transform = `translateX(${distance}px)`
      // 进度条移动 
      this.$refs['progress-content'].style.width = `${precent}%`; 
    }
  },
  mounted() {
    this.boxLeft = this.$refs['progress-box'].getBoundingClientRect().left;
    this.boxWidth = this.$refs['progress-box'].clientWidth
  },
  filters: {
    formateTime(data,num) {
      const m = parseInt(data/60,10);
      const s = parseInt(data%60,10);

      const diffM = new Array(num-String(m).length+1).join('0')
      const diffS = new Array(num-String(s).length+1).join('0')
      return `${diffM}${m}:${diffS}${s}`
    }
  },
  watch: {
    currentTime(newVal) {
      const distance = (newVal/this.duration) * this.boxWidth
      // console.log('时间改变',distance)
      if(this.touch) return
      this.move(distance)
    }
  }
};
/*
1. 根据歌曲的总时间 当前时间的 百分比。计算出进度条的宽度百分比
2. 拖动的元素 控制歌曲的播放
   * 手指抬起的时候获取手指距离左侧的距离  除以 总的长度 计算出百分比
   * 总时长 * 百分比  获取移动后的时长
   

书写一个方法
给定2个数字 a 和 b  b数字的位数 给a做补0操作
11  1 
000000011
*/
</script>
<style lang="less" scoped>
@import "~@style/index.less";
.progress {
  display: flex;
  justify-content: center;
  .box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .w(300);
    .h(50);
    border: 1px solid red;

    .progress-box {
      position: relative;
      background: #0000004d;
      .w(220);
      .h(4);
      .progress-content {
        position: absolute;
        left: 0;
        .h(4);
        background: #ffcd32;
      }
      .dot {
        position: absolute;
        left: -4px;
        top: -4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ffcd32;
        border: 2px solid #fff;
      }
    }
  }
}
</style>
